<template>
    <view class="page-body">
		<view class="headImg">
			<image src="../../static/img/headBgc.jpg" mode="aspectFill"></image>
			<view class="title">
				<p>米花谷</p>
				<p>距你{{distance}}</p>
			</view>
		</view>
        <view class="page-section page-section-gap" style="text-align: center;">
            <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
        </view>
		<view class="contain">
			123214154
		</view>
		<view class="bottom">
			<view class="">分享</view>
			<view class="">收藏</view>
			<view class="">前往</view>
		</view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
	            current: {
	                poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
	                name: '龙门石窟',
	                author: '佚名',
	                src: '../../hybrid/html/static/1111.mp3',
	            },
	            audioAction: {
	                method: 'pause'
	            },
				distance:''
	        }
	    },
		onLoad() {
			 this.distance=uni.getStorageSync('distance')
		}
	}
</script>

<style lang="scss" scoped>
	.page-body{
		.headImg{
			position: relative;
			width: 100vw;
			height: 300rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.title{
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 0 0 40rpx 40rpx;
				color: #fff;
			}
			.title p:nth-child(1){
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.title p:nth-child(2){
				font-size: 20rpx;
			}
		}
		.page-section{
			margin: 20rpx 0;
		}
		.contain{
			padding: 0 30rpx;
		}
		.bottom{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 110rpx;
			padding-top: 20rpx;
			display: flex;
			justify-content: space-around;
			border-top: 1px solid #f5f5f5;
			color: #666;
			font-size: 28rpx;
		}
	}
	.contain{
		width: 100vw;
		overflow: hidden;
		.touristMsg{
			.headImg{
				width: 100%;
				height: 360rpx;
				overflow: hidden;
				image{
					width: 100%;			
				}
			}
			.touristContain{
				width: 100%;
				padding: 40rpx;
				.touristTitle{
					display: flex;
					justify-content: space-between;
					.left{
						width: 80%;
						.name{
							font-size: 32rpx;
							font-weight: 600;
						}
						.label{
							margin-top: 20rpx;
							text{
								padding: 0 8rpx;
								border: 1rpx solid #f0ad4e;
								margin-left: 10rpx;
								font-size: 26rpx;
								color: #f0ad4e;
								border-radius: 6rpx;
							}
						}
					}
					.right{
						width: 130rpx;
						height: 100rpx;
						padding: 10rpx 0 0 30rpx;
						text-align: center;
						border-left: 1px solid #f5f5f5;
						image{
							width: 60rpx;
							height: 60rpx;
						}
						text{
							display: block;
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				.touristDetail{
					width: 100%;
					padding: 40rpx 0 0;
					color: #999;
					// .checkAll{
					// 	color: #f0ad4e;
					// }
					// .allDetail{
					// 	text-overflow: -o-ellipsis-lastline;
					// 	overflow: hidden;  
					// 	text-overflow: ellipsis;  
					// 	display: -webkit-box;  
					// 	-webkit-line-clamp: 2;    //文本一行显示
					// 	-webkit-box-orient: vertical; 
					// }
				}
			}
		}
	}
	
	// 公共头部
	.commonHeadBox{
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
		.commonLeft{
			background-color: #fff;
			font-size: 34rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.commonRight{
			font-size: 28rpx;
			color: #666;
			background-color: #fff;
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		text{
			margin: 0 8rpx;
		}
	}
	
</style>
